<template>
  <div class="page-card dhData">
    <h-query ref="query" :showKey="[]" :query="query" @search="search">
      <a-col :span="24" slot="custom">
        <a-space>
          企业上年度营业收入(万元):
          <a-select style="width: 200px" placeholder="请选择" v-model="qysnd">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
            v-if="qysnd == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.annualIncome"></a-input-number>
          <a-input-number
            :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.annualIncomeNumber1"></a-input-number>
          <template v-if="qysnd != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="qysnd2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              style="width: 200px"
              placeholder="请输入"
              v-model="params.annualIncomeNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          高管人数:
          <a-select style="width: 200px" placeholder="请选择" v-model="ggrs">

            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="ggrs == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.seniorNum"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.seniorNumNumber1"></a-input-number>
          <template v-if="ggrs != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="ggrs2">

              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.seniorNumNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          员工人数:
          <a-select style="width: 200px" placeholder="请选择" v-model="ygrs">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="ygrs == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.employeNum"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.employeNumNumber1"></a-input-number>
          <template v-if="ygrs != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="ygrs2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.employeNumNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          党员总数:
          <a-select style="width: 200px" placeholder="请选择" v-model="dyrs">

            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="dyrs == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.totalSum"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.totalSumNumber1"></a-input-number>
          <template v-if="dyrs != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="dyrs2">

              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.totalSumNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          在册党员数:
          <a-select style="width: 200px" placeholder="请选择" v-model="zcdys">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number

            v-if="zcdys == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.registered"></a-input-number>
          <a-input-number

            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.registeredNumber1"></a-input-number>
          <template v-if="zcdys != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="zcdys2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.registeredNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          流动党员:
          <a-select style="width: 200px" placeholder="请选择" v-model="lddys">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="lddys == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.flow"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.flowNumber1"></a-input-number>
          <template v-if="lddys != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="lddys2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.flowNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          高管中党员人数:
          <a-select style="width: 200px" placeholder="请选择" v-model="ggzdyrs">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="ggzdyrs == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.highRise"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.highRiseNumber1"></a-input-number>
          <template v-if="ggzdyrs != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="ggzdyrs2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.highRiseNumber2"></a-input-number>
          </template>

          <a-space>
            党组织书记是否属于高管：
            <a-select style="width: 200px" placeholder="请选择" v-model="queryParams.secretarySenior" allowClear>
              <a-select-option value="是">是</a-select-option>
              <a-select-option value="否">否</a-select-option>
            </a-select>
          </a-space>
        </a-space>

      </a-col>
      <a-col :span="24" slot="custom">
        <a-space>
          中层中党员人数:
          <a-select style="width: 200px" placeholder="请选择" v-model="zcdyrs">
            <!-- <a-select-option value=">">大于</a-select-option> -->
            <a-select-option value=">=">大于等于</a-select-option>
            <a-select-option value="=">等于</a-select-option>
          </a-select>
          <a-input-number
            v-if="zcdyrs == '='"
            style="width: 200px"
            placeholder="请输入"
            v-model="params.middleRise"></a-input-number>
          <a-input-number
            v-else
            style="width: 200px"
            placeholder="请输入"
            v-model="params.middleRiseNumber1"></a-input-number>
          <template v-if="zcdyrs != '='">
            <a-select style="width: 200px" placeholder="请选择" v-model="zcdyrs2">
              <!-- <a-select-option value="<">小于</a-select-option> -->
              <a-select-option value="<=">小于等于</a-select-option>
            </a-select>
            <a-input-number
              style="width: 200px"
              placeholder="请输入"
              v-model="params.middleRiseNumber2"></a-input-number>
          </template>
        </a-space>
      </a-col>
      <a-button style="margin-left: 12px" slot="btn" @click="reset">重 置</a-button>
      <div class="a-button-right" style="margin-top: 400px">
        <a-space>
          <UploadExcel downloadModal="/admin/InterOrgan/writeMould" action="/admin/InterOrgan/read" download="/admin/InterOrgan/write" @change="$refs.htable.refresh(true)" />
          <!-- <a-button type="primary" @click="actions">抽 签</a-button>
          <a-button type="primary" @click="showHistoryAct">抽签历史记录</a-button> -->
          <a-button type="primary" @click="add">添 加</a-button>
          <!-- <a-button type="primary" @click="deletes" v-if="ids.length">批量删除</a-button> -->
          <a-popconfirm
            title="确定要清空吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="empty"
          >
            <a-button type="danger">清空</a-button>
          </a-popconfirm>
        </a-space>
      </div>

      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添 加</a-button> -->
    </h-query>
    <div style="margin-bottom: 12px">
      <a-button type="primary" v-if="ids.length" @click="deletes">批量删除</a-button>
    </div>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="true"
      :zebraStripes="false"
      showRowSelection
      @select="select"
    >
      <span slot="type" slot-scope="{text}">
        {{ type[text] }}
      </span>
      <span slot="businessScope" slot-scope="{text}">
        <a-popover placement="topLeft">
          <template slot="content">
            <div style="max-width: 300px">
              {{ text }}
            </div>
          </template>
          {{ text }}
        </a-popover>
      </span>
      <div slot="secretaryName" slot-scope="{text, record}">
        <p>{{ text }}</p>
        <p>{{ record.secretaryPost }}</p>
        <p>{{ record.secretaryPhone }}</p>
      </div>
      <div slot="groupName" slot-scope="{text, record}">
        <p>{{ text }}</p>
        <p>{{ record.groupPost }}</p>
        <p>{{ record.groupPhone }}</p>
      </div>
      <span slot="action" slot-scope="{text, record}">
        <a @click="edit(record)">编辑</a>
        <a-divider type="vertical"></a-divider>
        <a @click="look(record)">查看</a>
        <a-divider type="vertical"></a-divider>
        <a @click="remove(record)" class="red">删除</a>
      </span>
      <!-- <span slot="isHome" slot-scope="{text, record}">
        <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
      </span>
      <span slot="isIndex" slot-scope="{text, record}">
        <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
      </span> -->
    </h-table>

    <createInfo ref="modal" v-model="show" @submit="submit" />
    <readInfo :id="id" v-model="showRead" />
  </div>
</template>
<script>
// eslint-disable-next-line
import { getInterOrganization, getInternetAccountDetail, addInternetAccount, InterOrganemptyData, deleteInterOrganization, editInternetAccount } from '@/api/db';
import createInfo from './action/createInfo';
import readInfo from './action/readInfo';
import UploadExcel from '@/components/UploadExcel/Index';

export default {
  components: {
    createInfo,
    UploadExcel,
    readInfo
  },
  data() {
    return {
      titleData: {},
      showRead: false,
      id: '',
      ids: [],
      params: {},
      qysnd: undefined,
      ggrs: undefined,
      ygrs: undefined,
      dyrs: undefined,
      qysnd2: undefined,
      ggrs2: undefined,
      ygrs2: undefined,
      dyrs2: undefined,
      zcdyrs: undefined,
      zcdyrs2: undefined,
      lddys: undefined,
      lddys2: undefined,
      ggzdyrs: undefined,
      ggzdyrs2: undefined,
      zcdys: undefined,
      zcdys2: undefined,
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        size: 'small',
        scroll: {
          x: 2400
        },
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' },
            width: 70
          },
          {
            align: 'center',
            title: '属地',
            dataIndex: 'possession',
            width: 140
          },
          {
            align: 'center',
            title: '互联网企业名称',
            dataIndex: 'internetName',
            width: 180
          },
          {
            align: 'center',
            title: '类型',
            dataIndex: 'internetType',
            width: 140
          },
          {
            align: 'center',
            title: '经营范围',
            dataIndex: 'businessScope',
            scopedSlots: { customRender: 'businessScope' },
            ellipsis: true,
            width: 180
          },
          {
            align: 'center',
            title: '经营地址',
            dataIndex: 'address',
            width: 180
          },
          {
            align: 'center',
            // title: '企业上年度营业收入（万元）',
            title: () => {
              return (
                <div>
                  <div>企业上年度营业收入（万元）</div>
                  <div>
                    <div>合计：{ this.titleData.annualIncomeSum || 0 }</div>
                    <div>平均：{ this.titleData.annualIncomeAvg || 0 }</div>
                  </div>
                </div>
              );
            },
            dataIndex: 'annualIncome',
            width: 200
          },
          {
            align: 'center',
            title: '企业资本构成',
            dataIndex: 'capitalComposition',
            width: 140
          },
          {
            align: 'center',
            title: '出资人（负责人）',
            dataIndex: 'personLiable',
            width: 140
          },
          {
            align: 'center',
            title: '高管人数',
            dataIndex: 'seniorNum',
            width: 140
          },
          {
            align: 'center',
            // title: '员工人数',
            title: () => {
              return (
                <div>
                  <div>员工人数</div>
                  <div>
                    <div>合计：{ this.titleData.employeNumSum || 0 }</div>
                    <div>平均：{ this.titleData.employeNumAvg || 0 }</div>
                  </div>
                </div>
              );
            },
            dataIndex: 'employeNum',
            width: 140
          },
          {
            align: 'center',
            title: '党组织设置形式',
            dataIndex: 'setForm',
            width: 140
          },
          {
            align: 'center',
            title: '目前党组织隶属上级党组织',
            dataIndex: 'subordinate',
            width: 200
          },
          {
            align: 'center',
            // title: '党员数（人）',
            title: () => {
              return (
                <div>
                  <div>党员数（人）</div>
                  <div>
                    <div>合计：{ this.titleData.totalNumSum || 0 }</div>
                    <div>平均：{ this.titleData.totalSumAvg || 0 }</div>
                  </div>
                </div>
              );
            },
            children: [
              {
                align: 'center',
                title: '党员总数',
                dataIndex: 'totalSum',
                width: 80
              },
              {
                align: 'center',
                title: '在册党员数',
                dataIndex: 'registered',
                width: 80
              },
              {
                align: 'center',
                title: '流动党员',
                dataIndex: 'flow',
                width: 80
              }
            ],
            width: 140
          },
          {
            align: 'center',
            title: '党组织书记姓名、职务、联系方式',
            dataIndex: 'secretaryName',
            scopedSlots: { customRender: 'secretaryName' },
            width: 200
          },
          {
            align: 'center',
            title: '党组织书记是否属于高管',
            dataIndex: 'secretarySenior',
            width: 140
          },
          {
            align: 'center',
            title: '高管中党员人数',
            dataIndex: 'highRise',
            width: 140
          },
          {
            align: 'center',
            title: '中层中党员人数',
            dataIndex: 'middleRise',
            width: 140
          },
          {
            align: 'center',
            title: '群团组织负责人姓名、职务、联系方式',
            dataIndex: 'groupName',
            scopedSlots: { customRender: 'groupName' },
            width: 240
          },
          {
            align: 'center',
            title: '备注',
            dataIndex: 'remark',
            width: 200
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            width: 160,
            fixed: 'right'
          }
        ],
        pagination: {
          total: 100,
          // showSizeChanger: true,
          // showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }
      },
      form: {

      },
      type: {
        0: '个人',
        1: '企业'
      },
      query: [
        {
          key: 'title',
          type: 'input',
          label: '企业名称'
        },
        {
          key: 'internetType',
          type: 'select',
          label: '类型',
          options: [
            { label: '信息化', value: '信息化' },
            { label: '电子商务', value: '电子商务' },
            { label: '互联网金融', value: '互联网金融' },
            { label: '生活服务', value: '生活服务' },
            { label: '网络安全', value: '网络安全' },
            { label: '网络教育和出版', value: '网络教育和出版' },
            { label: '网络社交', value: '网络社交' },
            { label: '网络音视频', value: '网络音视频' },
            { label: '网络游戏', value: '网络游戏' },
            { label: '新闻信息', value: '新闻信息' },
            { label: '其他', value: '其他' }
          ]
        },
        {
          key: 'setForm',
          type: 'select',
          label: '党组织设置形式',
          options: [
            { label: '党委', value: '党委' },
            { label: '党支部', value: '党支部' },
            { label: '党总支', value: '党总支' },
            { label: '联合党支部', value: '联合党支部' },
            { label: '流动支部', value: '流动支部' },
            { label: '未设在属地', value: '未设在属地' }
          ]
        },
        {
          key: 'capitalComposition',
          type: 'select',
          label: '企业资本构成',
          options: [
            {
              label: '民营',
              value: '民营'
            },
            {
              label: '外资',
              value: '外资'
            },
            {
              label: '国资',
              value: '国资'
            }
          ]
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        secretarySenior: ''
      }
    };
  },
  methods: {
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getInterOrganization(this.queryParams).then(res => {
        this.titleData = res.titleData;
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    look(row) {
      this.id = row.id;
      this.showRead = true;
    },
    search(params) {
      Object.assign(this.queryParams, params, this.params);
      this.$refs.htable.refresh();
    },
    reset() {
      this.qysnd = undefined;
      this.ggrs = undefined;
      this.ygrs = undefined;
      this.dyrs = undefined;
      this.qysnd2 = undefined;
      this.ggrs2 = undefined;
      this.ygrs2 = undefined;
      this.dyrs2 = undefined;
      this.zcdyrs = undefined;
      this.zcdyrs2 = undefined;
      this.lddys = undefined;
      this.lddys2 = undefined;
      this.ggzdyrs = undefined;
      this.ggzdyrs2 = undefined;
      this.zcdys = undefined;
      this.zcdys2 = undefined;
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        secretarySenior: ''
      };
      this.params = {};
      this.$refs.query.clear();
      this.$refs.htable.refresh();
    },
    add() {
      this.$refs.modal.add();
      this.show = true;
    },
    edit(row) {
      this.$refs.modal.edit(row);
      this.show = true;
    },
    submit() {
      this.$refs.htable.refresh();
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '确定要删除吗？',
        onOk() {
          deleteInterOrganization({ ids: [id] }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
    select(e) {
      console.log(e);
      this.ids = e.selectedRowKeys;
    },
    deletes() {
      const that = this;
      this.$confirm({
        title: '确定要删除所选择的数据吗？',
        onOk() {
          deleteInterOrganization({ ids: that.ids }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
            that.$refs.htable.cancel();
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    },
    empty() {
      InterOrganemptyData().then(res => {
        this.$message.success('清空成功');
        this.$refs.htable.refresh(true);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }
}
p {
  margin: 0;
}
</style>
